<template>
  <div class="container">
    <dv-border-box-12 style="height: 100%" >
      <div class="text-center align-middle text-padding" style="height:100%;display: flex;flexWrap: wrap;align-items:center;justify-content: center

">
        <!-- Your content goes here -->
        <div><span style="font-size: 1.5vh">{{titleIsShow}}</span><br><span class="number-style">{{titleNumber}}</span></div>
      </div>
<!--      <span class="text-center align-middle">{{titleIsShow}}</span>-->
    </dv-border-box-12>
  </div>
</template>

<script>
export default {
  name: 'textbox',
  props: {
    titleIsShow: {
      type: String,
      required: false
    },
    height: {
      type: Number,
      required: false,
      default: 215
    },
    titleNumber: {
      type: String,
      required: false,
      default: '215'
    }
  }
}
</script>

<style scoped>
.text-padding{
  padding: 15px;
  height: 100%;
}
.number-style{
  font-size: 2.8vh;
  color: #33EBCA;
  margin: 10px;
  animation: changeshadow 1s  ease-in  infinite ;
  /* 其它浏览器兼容性前缀 */
  -webkit-animation: changeshadow 1s linear infinite;
  -moz-animation: changeshadow 1s linear infinite;
  -ms-animation: changeshadow 1s linear infinite;
  -o-animation: changeshadow 1s linear infinite;
}
@keyframes changeshadow {
  0%{ text-shadow: 0 0 4px #33EBCA}
  50%{ text-shadow: 0 0 40px #33EBCA}
  100%{ text-shadow: 0 0 4px #33EBCA}
}
/* 添加兼容性前缀 */
@-webkit-keyframes changeshadow {
  0%{ text-shadow: 0 0 4px #33EBCA}
  50%{ text-shadow: 0 0 40px #33EBCA}
  100%{ text-shadow: 0 0 4px #33EBCA}
}
@-moz-keyframes changeshadow {
  0%{ text-shadow: 0 0 4px #33EBCA}
  50%{ text-shadow: 0 0 40px #33EBCA}
  100%{ text-shadow: 0 0 4px #33EBCA}
}
@-ms-keyframes changeshadow {
  0%{ text-shadow: 0 0 4px #33EBCA}
  50%{ text-shadow: 0 0 40px #33EBCA}
  100%{ text-shadow: 0 0 4px #33EBCA}
}
@-o-keyframes changeshadow {
  0%{ text-shadow: 0 0 4px #28b1f8}
  50%{ text-shadow: 0 0 40px #28b1f8}
  100%{ text-shadow: 0 0 4px #28b1f8}
}
</style>
